<template>
  <div class="home">
    <home-header class="home-header" :city="city"></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-catelog :iconList="iconList"></home-catelog>
    <home-hot :hotPriseList="hotPriseList" :hotTrendList="hotTrendList" :hotContentList="hotContentList"></home-hot>
    <home-weekend :weekendList="weekendList"></home-weekend>
    <home-guess :guessList="guessList"></home-guess>
  </div>
</template>

<script>
import axios from 'axios'
import homeHeader from './components/homeHeader'
import homeSwiper from './components/homeSwiper'
import homeCatelog from './components/homeCatelog'
import homeHot from './components/homeHot'
import homeWeekend from './components/homeWeekend'
import homeGuess from './components/homeGuess'
export default {
  name: 'Home',
  components:{
    homeHeader,
    homeSwiper,
    homeCatelog,
    homeHot,
    homeWeekend,
    homeGuess
  },
  data(){
    return{
        city:'',
        guessList:[],
        hotPriseList:[],
        hotTrendList:[],
        hotContentList:[],
        iconList:[],
        swiperList:[],
        weekendList:[]
    }
  },
  // 
  methods:{
    getHomeData(){
        console.log('getHomeData')
        axios.get("../../../static/mock/index.json")
            .then(this.getHomeDataSucc)
    },
    getHomeDataSucc(res){
        // console.log(res)
        res = res.data
        if(res.data){//相当于res.data.data
            const data=res.data
            console.log(data) 
            this.city=data.city
            this.guessList = data.guessList
            this.hotPriseList = data.hotPriseList
            this.hotTrendList = data.hotTrendList
            this.hotContentList = data.hotContentList
            this.iconList = data.iconList
            this.swiperList = data.swiperList
            this.weekendList = data.weekendList

        }

    }
  },
  mounted(){
   this.getHomeData()
  }
}
</script>


<style lang="stylus" scoped>
.home
	position:relative
	.home-header
		position:fixed
		top:0
		left:0
		z-index:100
		width:100%
</style>
